<template>

    <div class="nav">
        <el-menu default-active="2" class="el-menu" @open="handleOpen" @close="handleClose">
            <el-menu-item v-for="(item, index) in nav" :key="index" :index="index">
                <span>{{ item.name }}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
export default {
    data() {
        return {
            nav: [
                { name: "单例模式" },
                { name: "工厂模式" },
                { name: "抽象工厂模式" },
                { name: "建造者模式" },
                { name: "适配器模式" }
            ]
        }
    }
}
</script>
<style scoped>
.nav {
    height: 100%;
}

.el-menu {
    height: 100%;
}
</style>
